<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: ZJZ
 * @Date: 2021-07-20 09:33:05
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-03-10 11:13:06
-->
<template>
  <div>
    <el-form
      :label-position="labelPosition"
      :model="formList"
      ref="formList"
      :rules="formRules"
    >
      <el-form-item
        v-if="formList.type === 1"
        :label="formList.name"
        prop="text"
      >
        <el-input
          v-model="formList.text"
          :placeholder="formList.inputTips"
          style="width: 330px"
        ></el-input>
      </el-form-item>
      <el-form-item
        v-if="formList.type === 2"
        :label="formList.name"
        prop="rowText"
      >
        <el-input
          v-model="formList.rowText"
          :placeholder="formList.inputTips"
          style="width: 330px"
          type="textarea"
          :rows="2"
        ></el-input>
      </el-form-item>
      <el-form-item
        v-if="formList.type === 3"
        :label="formList.name"
        prop="choiceList"
      >
        <el-checkbox-group v-model="formList.choiceList">
          <el-checkbox
            v-for="(item, index) in formList.labelOptions"
            :key="index"
            :label="item.label"
            name="type"
          ></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item
        v-if="formList.type === 4"
        :label="formList.name"
        prop="radio"
      >
        <el-radio v-model="formList.radio" label="1">
          {{ formList.value }}
        </el-radio>
        <el-radio v-model="formList.radio" label="2">
          {{ formList.value1 }}
        </el-radio>
      </el-form-item>
      <el-form-item
        v-if="formList.type === 5"
        :label="formList.name"
        prop="dropDown"
      >
        <el-select
          v-model="formList.dropDown"
          style="width: 330px"
          :placeholder="formList.inputTips"
        >
          <el-option
            v-for="(item, index) in formList.labelOptions"
            :key="index"
            :label="item.label"
            :value="`${item.value},${item.label}`"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="formList.type === 6"
        :label="formList.name"
        prop="num"
      >
        <el-input
          :placeholder="formList.inputTips"
          v-model="formList.num"
          style="width: 330px"
          oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
        ></el-input>
      </el-form-item>
      <el-form-item
        v-if="formList.type === 7"
        :label="formList.name"
        prop="phone"
      >
        <el-input
          :placeholder="formList.inputTips"
          v-model="formList.phone"
          style="width: 330px"
        ></el-input>
      </el-form-item>
      <el-form-item
        v-if="formList.type === 8"
        :label="formList.name"
        prop="mailbox"
      >
        <el-input
          :placeholder="formList.inputTips"
          v-model="formList.mailbox"
          style="width: 330px"
        ></el-input>
      </el-form-item>
      <el-form-item
        v-if="formList.type === 9"
        :label="formList.name"
        prop="fileImg"
      >
        <el-upload
          ref="uploadFiles"
          action="#"
          list-type="picture-card"
          :auto-upload="false"
          accept="image/jpeg,image/png"
          :limit="1"
          :on-change="getFile"
          :on-remove="handleRemove"
          :file-list="fileList"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item
        v-if="formList.type === 10"
        :label="formList.name"
        prop="fileList1"
        class="upLoad"
      >
        <el-upload
          class="upload-demo"
          action="#"
          accept=".doc,.docx,.xls,.xlsx"
          :on-change="getFile1"
          :file-list="fileList"
          :http-request="httpRequest"
        >
          <el-button size="small" type="primary"> 点击上传 </el-button>
        </el-upload>
        <span class="enclosure" v-if="formList.fieldName">
          <a :href="formList.fieldName">(下载附件)</a>
        </span>
      </el-form-item>
      <el-form-item
        v-if="formList.type === 11"
        :label="formList.name"
        prop="dates"
      >
        <el-date-picker
          :placeholder="formList.inputTips"
          type="datetime"
          style="width: 330px"
          value-format="yyyy-MM-dd HH:mm:ss"
          v-model="formList.dates"
        >
        </el-date-picker>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { saveFile } from "@/api/registration";
export default {
  props: {
    formList: {
      type: Object,
      required: true,
    },
  },
  created() {
    this.formList.choiceList = [];
    if (
      this.formList.type == 9 &&
      this.formList.fileImg !== "" &&
      this.formList.fileImg !== null
    ) {
      this.fileList.push({
        name: "",
        url: this.formList.fileImg,
      });
    }
  },
  mounted() {
    let checkMobile = (rule, value, callback) => {
      // 验证手机号的正则表达式
      const regMobile =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;

      if (regMobile.test(value)) {
        // 合法的手机号
        return callback();
      }
      // 不合法
      callback(new Error("请输入合法的手机号"));
    };
    // 邮箱校验规则
    const checkEmail = (rule, value, callback) => {
      let emailReg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (emailReg.test(value) || value == "") {
        return callback();
      } else {
        callback(new Error("邮箱格式错误"));
      }
    };
    this.formRules = this.formList.rules;
    this.$nextTick(function () {
      this.$refs.formList.clearValidate();
      if (this.formList.type == 8 && this.formList.isNull == true) {
        this.formList.rules.mailbox.push({
          validator: checkEmail,
          required: true,
          trigger: "blur",
        });
      }
      if (this.formList.type == 7 && this.formList.isNull == true) {
        this.formList.rules.phone.push({
          validator: checkMobile,
          required: true,
          trigger: "blur",
        });
      }
    });
  },
  data() {
    return {
      labelPosition: "top",
      formRules: {},
      fileList: [],
      file: {},
    };
  },
  methods: {
    // 转换成base64
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        let reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function () {
          imgResult = reader.result;
        };
        reader.onerror = function (error) {
          reject(error);
        };
        reader.onloadend = function () {
          resolve(imgResult);
        };
      });
    },
    getFile(file) {
      this.getBase64(file.raw).then((res) => {
        this.formList.fileImg = res;
      });
    },
    // 上传文件
    httpRequest(file) {},
    getFile1(file) {
      this.file = file.raw;
      var fd = new FormData();
      fd.append("file", this.file);
      saveFile(fd).then((res) => {
        this.formList.fileList1 = res.data.url;
      });
    },
    handleRemove(file) {
      // let fileList = this.$refs.upload.uploadFiles;
      // let index = fileList.findIndex((fileItem) => {
      //   return fileItem.uid === file.uid;
      // });
      // fileList.splice(index, 1);
    },
  },
};
</script>

<style lang="less" scoped>
.label {
  height: 25px;
  margin-top: 20px;
  padding-top: 10px;
  margin-bottom: 10px;
}
/deep/ .el-form-item__label {
  padding: 0;
}
/deep/.el-form-item {
  margin-bottom: 10px;
}
/deep/ .el-form-item__content {
  position: relative;
  .enclosure {
    position: absolute;
    left: 110px;
    top: 0;
  }
}
</style>